<template>
  <div class="loginFirst" ref="loginbox">
    <div class="chacha el-icon-circle-close" @click="xiaoshi"></div>
    <div class="loginBox">
      <div class="phoneBox">
        <span>邮箱</span>
        <input
          type="text"
          id="phone"
          class="input1"
          required="required"
          placeholder="请输入邮箱"
          v-model="email"
        />
        <div class="font">请输入邮箱</div>
      </div>

      <div class="pwdBox">
        <span>密码:</span>
        <input
          type="password"
          id="pwd"
          class="input1"
          required="required"
          placeholder="请输入密码"
          v-model="pwd"
        />
      </div>

      <div class="login_btn">
        <button type="button" class="loginBtn" @click="loginFn">登录</button>
        <button type="button" class="cancelBtn">取消</button>
      </div>
    </div>
    <div class="reg_model model1" ref="model1">
      <div class="model_font">您还未注册噢，去注册~</div>
      <router-link to="/register" class="queren queren1">确认</router-link>
    </div>
    <div class="reg_model model2" ref="model2">
      <div class="model_font">密码错误噢，请重新登录</div>
      <!-- <router-link to="/login" class="queren queren2">确认</router-link> -->
      <div class="queren queren2" ref="queren2">确认</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      email: "",
      pwd: "",
    };
  },

  methods: {
    xiaoshi() {
      this.$refs.loginbox.style.display = "none";
      this.$parent.login1 = "false";
    },
    loginFn() {
      this.$axios
        .post("/dzf/login", { email: this.email, pwd: this.pwd })
        .then((res) => {
          console.log(res);
          if (res.data.code == 4003) {
            // 未注册
            // 模态弹窗  显示个注册页面
            var model1 = this.$refs.model1;
            model1.style.display = "block";
          } else if (res.data.code == 4004) {
            // 账号密码错误
            // 模态弹窗 重新登录
            var model2 = this.$refs.model2;
            model2.style.display = "block";
            var queren2 = this.$refs.queren2;
            queren2.onclick = function () {
              model2.style.display = "none";
            };
          } else {
            // 登录成功
            // 设置缓存标识（重要）
            window.localStorage.setItem("islogin", this.email);
            this.$refs.loginbox.style.display = "none";
            setTimeout(() => {
              this.$parent.geren = "true";
            }, 300);
            setTimeout(() => {
              location.reload();
            }, 100);
            // location.reload()
            this.$router.push("/zzt");
          }
        });
    },
  },
};
</script>
<style  scoped>
* {
  padding: 0;
  margin: 0;
}
.loginFirst {
  width: 1350px;
  height: 650px;
  background-color: rgba(10, 10, 10, 0.4);
  position: fixed;
}
.chacha {
  font-size: 50px;
  color: lightgray;
  position: absolute;
  right: 2px;
  top: 0;
}
.loginBox {
  width: 400px;
  height: 250px;
  position: absolute;
  background-color: #fff;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  text-align: center;
  /* color: black; */
}

.loginBox .input1 {
  width: 250px;
  height: 35px;
  margin-top: 20px;
  outline: none;
  border: 1px solid #ccc;
}

#phone {
  margin-top: 40px;
  margin-left: 10px;
}

.phoneBox span {
  /* color: white; */
  margin-left: 22px;
}

.pwdBox span {
  margin-left: 35px;
  /* color: white; */
}

.phoneBox {
  position: relative;
}

.font {
  position: absolute;
  color: red;
  font-size: 12px;
  top: 50px;
  left: 245px;
  display: none;
}

/* 验证码 */

.vfBox {
  margin-top: 20px;
  display: flex;
}

.vfBox span {
  margin-left: 60px;
}

#verify {
  width: 120px;
  height: 35px;
  outline: none;
  border: 1px solid #ccc;
}

#verifybox {
  margin-left: 30px;
  margin-top: -1px;
  height: 40px;
  background-color: skyblue;
}

/* 登录 */

.login_btn {
  width: 200px;
  height: 35px;
  margin: 20px auto;
  display: flex;
  justify-content: space-between;
}

.loginBtn {
  width: 70px;
  height: 35px;
  font-size: 18px;
}

.cancelBtn {
  width: 70px;
  height: 35px;
  font-size: 18px;
}

/* 模态弹窗 */

.reg_model {
  width: 300px;
  height: 80px;
  background-color: #fff;
  text-align: center;
  position: absolute;
  top: 0;
  left: 500px;
  border-radius: 10px;
  display: none;
  /* border: 1px solid red; */
}

.reg_model .model_font {
  font-size: 16px;
  margin-top: 20px;
}

.queren {
  width: 70px;
  height: 50ox;
  text-align: center;
  font-size: 18px;
  background-color: #ccc;
  position: absolute;
  border-radius: 5px;
  right: 5px;
  bottom: 5px;
}
</style>
